<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>一莲知四时·节气文化数字馆</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            background: url('chinese-bg.jpg') center/cover no-repeat;
            font-family: '楷体', cursive;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* 添加半透明遮罩 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            z-index: -1;
        }
          /* 标题特效 */
        .main-title {
            position: relative;
            margin: 2rem 0;
            font-size: 2.8rem;
            color: #4a3728;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            animation: titleFloat 3s ease-in-out infinite;
        }
        @keyframes titleFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        /* 导航栏 */
        nav {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 0.9rem 2rem;
            margin: 0.5rem 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        nav ul {
            display: flex;
            gap: 3rem;
            list-style: none;
        }
        nav a {
            color: #5d4a3e;
            text-decoration: none;
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            transition: all 0.3s;
        }
        nav a:hover {
            background: rgba(122, 92, 72, 0.1);
        }
        /* 罗盘容器 */
        .compass {
            position: relative;
            width: min(90vw, 700px);
            height: min(90vw, 700px);
            margin: 1rem auto;
        }
        /* 双环设计 */
        .season-ring, .inner-ring {
            position: absolute;
            border: 2px solid rgba(122, 92, 72, 0.2);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .season-ring {
            width: 100%;
            height: 100%;
            box-shadow: 0 0 30px rgba(122, 92, 72, 0.1);
        }
        .inner-ring {
            width: 70%;
            height: 70%;
            animation: ringPulse 4s ease-in-out infinite;
        }
        /* 中心莲花 */
        .lotus {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 45%;
            height: 45%;
            transform: translate(-50%, -50%);
            background: url('lotus.png') center/contain;
            animation: 
                rotate 40s linear infinite,
                lotusGlow 3s ease-in-out infinite;
            transition: all 0.5s ease-in-out;
        }
        /* 添加悬停放大效果 */
        .lotus:hover {
            transform: translate(-50%, -50%) scale(1.1);
            filter: brightness(1.2) drop-shadow(0 0 25px #fff);
        }
        /* 节气项 */
        .solar-term {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-left: -45px;
            margin-top: -45px;
        }
        .solar-term span {
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }
        /* 弹窗样式 */
        .detail-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(90%, 600px);
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: none;
            backdrop-filter: blur(10px);
        }
        /* 弹窗内容样式 */
        .term-section {
            margin: 1.5rem 0;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }
        .term-section:last-child {
            border-bottom: none;
        }
        .term-section h3 {
            color: #7a5c48;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .term-section ul {
            padding-left: 1.5rem;
            color: #666;
        }
        .term-section li {
            margin: 0.5rem 0;
        }
        .poem {
            font-style: italic;
            color: #888;
            line-height: 1.6;
        }
        /* 移动端适配 */
        @media (max-width: 768px) {
            .term-section {
                margin: 1rem 0;
            }
            
            .term-section h3 {
                font-size: 1rem;
            }
        }
        /* 莲花动态光效 */
        .lotus {
            animation: 
                rotate 40s linear infinite,
                lotusGlow 3s ease-in-out infinite,
                float 6s ease-in-out infinite;
        }
        /* 新增浮动动画 */
        @keyframes float {
            0%, 100% { transform: translate(-50%, -50%) translateY(0); }
            50% { transform: translate(-50%, -50%) translateY(-10px); }
        } */

        /* 节气项悬停特效 */
        .solar-term:hover span {
            animation: termHover 0.5s ease-out forwards;
        }

        @keyframes termHover {
            0% { transform: scale(1); }
            50% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1.1) rotate(0); }
        }
        /* 动画定义 */
        @keyframes ringPulse {
            0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
        }

        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes lotusGlow {
            0%, 100% { filter: brightness(1) drop-shadow(0 0 10px #fff); }
            50% { filter: brightness(1.1) drop-shadow(0 0 20px #fff); }
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .main-title { font-size: 1.8rem; }
            nav { padding: 0.8rem; }
            nav ul { gap: 1rem; }
            .compass { width: 95vw; height: 95vw; }
        }
        /* 在body最后添加 */
        .scroll-hint {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #7a5c48;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(-20px); }
            60% { transform: translateX(-50%) translateY(-10px); }
        }
    </style>
</head>
<body>
    <h1 class="main-title">一莲知四时·种子的节气轮回</h1>
    <nav>
        <ul>
            <li><a href="./main.html">四季轮回</a></li>
            <li><a href="./nelumbo.html">莲韵生长</a></li>
            <li><a href="./demo/demop.html">莲生长数据</a></li>
            <li><a href="./demo/demo2.html">生长关系图</a></li>
        </ul>
    </nav>

    <div class="compass">
        <div class="season-ring"></div>
        <div class="inner-ring"></div>
        <div class="lotus"></div>
    </div>
    <!-- 在body内添加 -->
    <div class="scroll-hint">↑ 滑动浏览完整节气环 ↑</div>
    <!-- 详情弹窗 -->
    <div id="detailModal" class="detail-modal">
        <span class="modal-close">×</span>
        <h2 id="termTitle"></h2>
        <div id="termContent"></div>
    </div>

    <script>
        // 二十四节气数据
        const solarTerms = [
            "立春", "雨水", "惊蛰", "春分", "清明", "谷雨",
            "立夏", "小满", "芒种", "夏至", "小暑", "大暑",
            "立秋", "处暑", "白露", "秋分", "寒露", "霜降",
            "立冬", "小雪", "大雪", "冬至", "小寒", "大寒"
        ];
        // 生成节气项
        const compass = document.querySelector('.compass');
        const radius = compass.offsetWidth / 2 * 0.8;

        solarTerms.forEach((term, index) => {
            const angle = (360 / solarTerms.length) * index;
            const termElem = document.createElement('div');
            termElem.className = 'solar-term';
            
            // 计算位置
            const radian = (angle - 90) * Math.PI / 180;
            const x = radius * Math.cos(radian);
            const y = radius * Math.sin(radian);
            
            termElem.style.transform = `translate(${x}px, ${y}px)`;
            termElem.innerHTML = `<span>${term}</span>`;
            
            // 点击事件
            termElem.addEventListener('click', () => showTermDetail(term));
            compass.appendChild(termElem);
        });

        // 添加节气项互动
        document.querySelectorAll('.solar-term').forEach(term => {
            term.addEventListener('mousemove', (e) => {
                const rect = term.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width/2;
                const y = e.clientY - rect.top - rect.height/2;
                
                term.style.transform = `
                    translate(${parseFloat(term.style.transform.split('translate(')[1].split('px')[0])}px, 
                    ${parseFloat(term.style.transform.split(',')[1])}px)
                    rotate(${x * 0.3}deg)
                    scale(1.05)
                `;
                
                term.style.filter = `drop-shadow(${-x*0.1}px ${-y*0.1}px 3px rgba(0,0,0,0.1))`;
            });

            term.addEventListener('mouseleave', () => {
                term.style.transform = term.style.transform.replace(/rotate.*?scale/, 'scale');
                term.style.filter = 'none';
            });
        });
        const termDetails = {
    "立春": {
        title: "立春",
        date: "2月3-5日",
        content: `
            <div class="term-section">
                <p>又名正月节、岁节、改岁、岁旦、打春等为二十四节气之首。当太阳到达黄经315°时为立春，于每年公历2月3-5日交节。立，是“开始”之意；春，代表着温暖、生长。</p>
            </div>
            
            <div class="term-section">
                <h3>🌱 物候特征</h3>
                <ul>
                    <li>一候东风解冻</li>
                    <li>二候蛰虫始振</li>
                    <li>三候鱼陟负冰</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🎎 传统习俗</h3>
                <p>✔ 打春牛：鞭打泥塑春牛，象征春耕开始<br>
                ✔ 咬春：吃春饼、萝卜等时鲜食物<br>
                ✔ 祭句芒：祭祀春神祈求丰收</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《立春》杜甫<br>
                春日春盘细生菜，忽忆两京梅发时。<br>
                盘出高门行白玉，菜传纤手送青丝。</p>
            </div>
        `
    },
    "雨水": {
        title: "雨水·润物无声",
        date: "2月18-20日",
        content: `
            <div class="term-section">
                <p>二十四节气之第2个节气。斗指壬 ；太阳到达黄经330°；每年公历2月18-20日交节。雨水节气的含义是降雨开始，降雨量极多以小雨或毛毛细雨为主，适宜的降水对农作物的生长很重要，它是农耕文化对于节令的反映。进入雨水节气，中国北方地区尚未有春天气息，南方大多数地方则是春意盎然，一幅早春的景象。</p>
            </div>
            
            <div class="term-section">
                <h3>🌧️ 物候特征</h3>
                <ul>
                    <li>一候獭祭鱼</li>
                    <li>二候鸿雁来</li>
                    <li>三候草木萌动</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🌂 传统习俗</h3>
                <p>✔ 回娘家：出嫁女儿带礼物回娘家省亲<br>
                ✔ 接寿：女婿给岳父母送藤椅祈福<br>
                ✔ 占稻色：用爆米花占卜收成</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《春夜喜雨》杜甫<br>
                好雨知时节，当春乃发生。<br>
                随风潜入夜，润物细无声。</p>
            </div>
        `
    },
    "惊蛰": {
        title: "惊蛰·春雷始鸣",
        date: "3月5-7日",
        content: `
            <div class="term-section">
                <p>二十四节气中的第三个节气。斗指丁，太阳到达黄经345°，于公历3月5-6日交节。惊蛰反映着自然界生物受节律变化影响而萌发、生长的状态。时至惊蛰，阳气上升、气温回暖、春雷乍动、雨水增多，万物生机盎然。农耕生产与大自然的节律息息相关，惊蛰节气在农耕上有着相当重要的意义，它是古代农耕文化对于自然节令的反映。</p>
            </div>
            
            <div class="term-section">
                <h3>⚡ 物候特征</h3>
                <ul>
                    <li>一候桃始华</li>
                    <li>二候仓庚鸣</li>
                    <li>三候鹰化为鸠</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍐 传统习俗</h3>
                <p>✔ 吃梨：寓意远离疾病<br>
                ✔ 祭白虎：化解是非纠纷<br>
                ✔ 打小人：驱赶霉运</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《观田家》韦应物<br>
                微雨众卉新，一雷惊蛰始。<br>
                田家几日闲，耕种从此起。</p>
            </div>
        `
    },
    "春分": {
        title: "春分·昼夜均分",
        date: "3月20-22日",
        content: `
            <div class="term-section">
                <p>也称“升分”，古时又称“日中”“日夜分”“仲春之月”，是二十四节气之一，春季第四个节气。斗指卯，太阳黄经达0°，于每年公历3月19-22日交节。</p>
            </div>
            
            <div class="term-section">
                <h3>⚖️ 物候特征</h3>
                <ul>
                    <li>一候玄鸟至</li>
                    <li>二候雷乃发声</li>
                    <li>三候始电</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🥚 传统习俗</h3>
                <p>✔ 立蛋："春分到，蛋儿俏"<br>
                ✔ 吃春菜：采撷野苋菜<br>
                ✔ 祭日：帝王祭拜太阳</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《春日田家》宋琬<br>
                野田黄雀自为群，山叟相过话旧闻。<br>
                夜半饭牛呼妇起，明朝种树是春分。</p>
            </div>
        `
    },
    "清明": {
        title: "清明·气清景明",
        date: "4月4-6日",
        content: `
            <div class="term-section">
                <p>二十四节气之一，春季的第五个节气。斗指乙，太阳到达黄经15°，便为清明。清明节气因为节令期间“气清景明、万物皆显”而得名。清明是反映自然界物候变化的节气，这个时节阳光明媚、草木萌动、百花盛开，自然界呈现一派生机勃勃的景象。中国南方地区，此时已呈气清景明之象；北方地区开始断雪，气温上升，春意融融。</p>
            </div>
            
            <div class="term-section">
                <h3>🌸 物候特征</h3>
                <ul>
                    <li>一候桐始华</li>
                    <li>二候田鼠化为鹌</li>
                    <li>三候虹始见</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🕯️ 传统习俗</h3>
                <p>✔ 扫墓祭祖：缅怀先人<br>
                ✔ 踏青春游：感受自然生机<br>
                ✔ 插柳戴柳：辟邪祈福</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《清明》杜牧<br>
                清明时节雨纷纷，路上行人欲断魂。<br>
                借问酒家何处有？牧童遥指杏花村。</p>
            </div>
        `
    },
    "谷雨": {
        title: "谷雨·雨生百谷",
        date: "4月19-21日",
        content: `
            <div class="term-section">
                <p>二十四节气之第6个节气，春季的最后一个节气。斗指辰；太阳黄经为30°；于每年公历4月19日—21日交节。谷雨取自“雨生百谷”之意，此时降水明显增加，田中的秧苗初插、作物新种，最需要雨水的滋润，降雨量充足而及时，谷类作物能茁壮成长。谷雨与雨水、小满、小雪、大雪等节气一样，都是反映降水现象的节气，是古代农耕文化对于节令的反映。</p>
            </div>
            
            <div class="term-section">
                <h3>🌾 物候特征</h3>
                <ul>
                    <li>一候萍始生</li>
                    <li>二候鸣鸠拂其羽</li>
                    <li>三候戴胜降于桑</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍵 传统习俗</h3>
                <p>✔ 喝谷雨茶：清火明目<br>
                ✔ 祭仓颉：纪念文字始祖<br>
                ✔ 赏牡丹：谷雨三朝看牡丹</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《晚春田园杂兴》范成大<br>
                谷雨如丝复似尘，煮瓶浮蜡正尝新。<br>
                牡丹破萼樱桃熟，未许飞花减却春。</p>
            </div>
        `
    },

    // 夏季
    "立夏": {
        title: "立夏·万物并秀",
        date: "5月5-7日",
        content: `
            <div class="term-section">
                <p>二十四节气中的第7个节气，夏季的第一个节气，交节时间在每年公历5月05-07日。此时北斗七星的斗柄指向东南方，太阳黄经达45°。历书：“斗指东南维，为立夏，万物至此皆长大，故名立夏也。”时至立夏，万物繁茂。立夏后，日照增加，逐渐升温，雷雨增多。立夏是标示万物进入旺季生长的一个重要节气。</p>
            </div>
            
            <div class="term-section">
                <h3>🌿 物候特征</h3>
                <ul>
                    <li>一候蝼蝈鸣</li>
                    <li>二候蚯蚓出</li>
                    <li>三候王瓜生</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>⚖️ 传统习俗</h3>
                <p>✔ 称人：立夏称体重保健康<br>
                ✔ 吃立夏蛋："立夏胸挂蛋，孩子不疰夏"<br>
                ✔ 尝三新：樱桃、青梅、麦子</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《立夏》陆游<br>
                赤帜插城扉，东君整驾归。<br>
                泥新巢燕闹，花尽蜜蜂稀。</p>
            </div>
        `
    },
    "小满": {
        title: "小满·籽粒初盈",
        date: "5月20-22日",
        content: `
            <div class="term-section">
                <p>二十四节气中的第八个节气，也是夏季的第二个节气。小满，斗指甲，太阳到达黄经60° [7]，于每年公历5月20—22日交节。小满之名，有两层含义。第一，与气候降水有关。小满节气期间南方的暴雨开始增多，降水频繁；民谚云“小满小满，江河渐满”。小满中的“满”，指雨水之盈。第二，与农业小麦有关。在北方地区小满节气期间降雨较少甚至无雨，这个“满”不是指降水，而是指小麦的饱满程度。</p>
            </div>
            
            <div class="term-section">
                <h3>🌾 物候特征</h3>
                <ul>
                    <li>一候苦菜秀</li>
                    <li>二候靡草死</li>
                    <li>三候麦秋至</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🚜 传统习俗</h3>
                <p>✔ 祭车神：祈求水源涌旺<br>
                ✔ 食苦菜：清热解暑<br>
                ✔ 抢水：举行古老仪式</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《小满》欧阳修<br>
                夜莺啼绿柳，皓月醒长空。<br>
                最爱垄头麦，迎风笑落红。</p>
            </div>
        `
    },
    "芒种": {
        title: "芒种·有芒之种",
        date: "6月5-7日",
        content: `
            <div class="term-section">
                <p>二十四节气之第九个节气，夏季的第三个节气，干支历午月的起始。斗指丙，太阳黄经达75°，于每年公历6月5-7日交节。“芒种”含义是“有芒之谷类作物可种，过此即失效”。这个时节气温显著升高、雨量充沛、空气湿度大，适宜晚稻等谷类作物种植。农事耕种以“芒种”这节气为界，过此之后种植成活率就越来越低。它是古代农耕文化对于节令的反映。</p>
            </div>
            
            <div class="term-section">
                <h3>🌾 物候特征</h3>
                <ul>
                    <li>一候螳螂生</li>
                    <li>二候鵙始鸣</li>
                    <li>三候反舌无声</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🌾 传统习俗</h3>
                <p>✔ 安苗祭祀：祈求丰收<br>
                ✔ 煮梅：三国"青梅煮酒"典故<br>
                ✔ 送花神：饯别花神仪式</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《时雨》陆游<br>
                时雨及芒种，四野皆插秧。<br>
                家家麦饭美，处处菱歌长。</p>
            </div>
        `
    },
    "夏至": {
        title: "夏至·日长之至",
        date: "6月21-22日",
        content: `
            <div class="term-section">
                <p>二十四节气的第10个节气。斗指午；太阳黄经90°；于公历6月20~22日交节。夏至这天，太阳直射地面的位置到达一年的最北端，几乎直射北回归线，此时，北半球各地的白昼时间达到全年最长。对于北回归线及其以北的地区来说，夏至也是一年中正午太阳高度最高的一天。</p>
            </div>
            
            <div class="term-section">
                <h3>☀️ 物候特征</h3>
                <ul>
                    <li>一候鹿角解</li>
                    <li>二候蝉始鸣</li>
                    <li>三候半夏生</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍜 传统习俗</h3>
                <p>✔ 吃夏至面："冬至饺子夏至面"<br>
                ✔ 祭神祀祖：消灾祈福<br>
                ✔ 测日影：立竿见影验节气</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《竹枝词》刘禹锡<br>
                杨柳青青江水平，闻郎江上踏歌声。<br>
                东边日出西边雨，道是无晴却有晴。</p>
            </div>
        `
    },
    "小暑": {
        title: "小暑·温风始至",
        date: "7月6-8日",
        content: `
            <div class="term-section">
                <p>二十四节气中的第十一个节气，干支历午月的结束以及未月的起始，夏天的第五个节气，表示季夏时节的正式开始。斗指辛，太阳到达黄经105度，于每年公历7月6日至8日交节。暑，是炎热的意思，小暑为小热，还不十分热。小暑虽不是一年中最炎热的时节，但紧接着就是一年中最热的节气大暑，民间有“小暑大暑，上蒸下煮”之说。</p>
            </div>
            
            <div class="term-section">
                <h3>🔥 物候特征</h3>
                <ul>
                    <li>一候温风至</li>
                    <li>二候蟋蟀居宇</li>
                    <li>三候鹰始鸷</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍉 传统习俗</h3>
                <p>✔ 食新：尝新米祭五谷<br>
                ✔ 吃藕：清热安神<br>
                ✔ 晒伏：晾晒衣物书籍</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《消暑》白居易<br>
                何以消烦暑，端坐一院中。<br>
                眼前无长物，窗下有清风。</p>
            </div>
        `
    },
    "大暑": {
        title: "大暑·腐草为萤",
        date: "7月22-24日",
        content: `
            <div class="term-section">
                <p>二十四节气中的第十二个节气，也是夏季最后一个节气。斗指未，太阳黄经为120°，于公历7月22日—24日交节。“暑”是炎热的意思，大暑，指炎热之极。大暑相对小暑，更加炎热，是一年中阳光最猛烈、最炎热的节气，“湿热交蒸”在此时到达顶点。大暑气候特征：高温酷热、雷暴、台风频繁。</p>
            </div>
            
            <div class="term-section">
                <h3>🔥 物候特征</h3>
                <ul>
                    <li>一候腐草为萤</li>
                    <li>二候土润溽暑</li>
                    <li>三候大雨时行</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍵 传统习俗</h3>
                <p>✔ 饮伏茶：清凉祛暑<br>
                ✔ 晒伏姜：驱寒保健<br>
                ✔ 送大暑船：祈福平安</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《大暑》曾几<br>
                赤日几时过，清风无处寻。<br>
                经书聊枕籍，瓜李漫浮沉。</p>
            </div>
        `
    },
    // 秋季
    "立秋": {
        title: "立秋·凉风至",
        date: "8月7-9日",
        content: `
            <div class="term-section">
                <p>“二十四节气”之第十三个节气，也是秋季的起始。斗指西南，太阳达黄经135°，在每年公历8月7、8日或9日。“立”，是开始之意；“秋”，意为禾谷成熟。整个自然界的变化是循序渐进的过程，立秋是阳气渐收、阴气渐长，由阳盛逐渐转变为阴盛的转折。在自然界，万物开始从繁茂成长趋向成熟。</p>
            </div>
            
            <div class="term-section">
                <h3>🍂 物候特征</h3>
                <ul>
                    <li>一候凉风至</li>
                    <li>二候白露生</li>
                    <li>三候寒蝉鸣</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍖 传统习俗</h3>
                <p>✔ 贴秋膘：吃肉补身<br>
                ✔ 啃秋：吃西瓜防秋燥<br>
                ✔ 晒秋：晾晒农作物</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《秋夕》杜牧<br>
                银烛秋光冷画屏，轻罗小扇扑流萤。<br>
                天阶夜色凉如水，坐看牵牛织女星。</p>
            </div>
        `
    },
    "处暑": {
        title: "处暑·暑气渐退",
        date: "8月22-24日",
        content: `
            <div class="term-section">
                <p>二十四节气中的第十四个节气，也是秋季的第二个节气，于每年公历8月22-24日交节。“处”是终止的意思，处暑表示炎热的酷暑结束，这时三伏已过或接近尾声，由于受短期回热天气俗称“秋老虎”影响，处暑过后仍有持续高温，会感到闷热，天气由炎热向闷热转变，真正凉爽一般要到白露前后。处暑时，斗指戊（西南方），太阳黄经达150°。</p>
            </div>
            
            <div class="term-section">
                <h3>🌾 物候特征</h3>
                <ul>
                    <li>一候鹰乃祭鸟</li>
                    <li>二候天地始肃</li>
                    <li>三候禾乃登</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🎋 传统习俗</h3>
                <p>✔ 放河灯：悼念逝者<br>
                ✔ 开渔节：庆祝渔业丰收<br>
                ✔ 吃鸭子："处暑送鸭，无病各家"</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《早秋曲江感怀》白居易<br>
                离离暑云散，袅袅凉风起。<br>
                池上秋又来，荷花半成子。</p>
            </div>
        `
    },
    "白露": {
        title: "白露·露凝而白",
        date: "9月7-9日",
        content: `
            <div class="term-section">
                <p>“二十四节气”中的第15个节气，秋季第3个节气，干支历申月的结束与酉月的起始。斗指庚；太阳达黄经165度；于公历9月7-9日交节。“白露”是反映自然界寒气增长的重要节气。由于冷空气转守为攻，白昼有阳光尚热，但傍晚后气温便很快下降，昼夜温差逐渐拉大。</p>
            </div>
            
            <div class="term-section">
                <h3>💧 物候特征</h3>
                <ul>
                    <li>一候鸿雁来</li>
                    <li>二候玄鸟归</li>
                    <li>三候群鸟养羞</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍶 传统习俗</h3>
                <p>✔ 收清露：收集露水制茶<br>
                ✔ 吃龙眼：补益身体<br>
                ✔ 酿白露酒：待客佳酿</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《白露》杜甫<br>
                白露团甘子，清晨散马蹄。<br>
                圃开连石树，船渡入江溪。</p>
            </div>
        `
    },
    "秋分": {
        title: "秋分·昼夜均长",
        date: "9月22-24日",
        content: `
            <div class="term-section">
                <p>二十四节气之第十六个节气，秋季第四个节气。斗指酉；太阳到达黄经180°；于每年的公历9月22～24日交节。秋分这天太阳几乎直射地球赤道，全球各地昼夜等长</p>
            </div>
            
            <div class="term-section">
                <h3>🍁 物候特征</h3>
                <ul>
                    <li>一候雷始收声</li>
                    <li>二候蛰虫坯户</li>
                    <li>三候水始涸</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🥮 传统习俗</h3>
                <p>✔ 祭月：古代重要祭祀活动<br>
                ✔ 竖蛋："秋分到，蛋儿俏"<br>
                ✔ 吃秋菜：野苋菜滚汤</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《夜喜贺兰三见访》贾岛<br>
                漏钟仍夜浅，时节欲秋分。<br>
                泉聒栖松鹤，风除翳月云。</p>
            </div>
        `
    },
    "寒露": {
        title: "寒露·露气寒冷",
        date: "10月8-9日",
        content: `
            <div class="term-section">
                <p>二十四节气之第十七个节气，秋季的第五个节气。斗指辛 [22] [24]；太阳到达黄经195°；在每年公历10月7日-9日交节。寒露，是深秋的节令，干支历戌月的起始。寒露是一个反映气候变化特征的节气。进入寒露，时有冷空气南下，昼夜温差较大，并且秋燥明显。</p>
            </div>
            
            <div class="term-section">
                <h3>🍂 物候特征</h3>
                <ul>
                    <li>一候鸿雁来宾</li>
                    <li>二候雀入大水为蛤</li>
                    <li>三候菊有黄华</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍁 传统习俗</h3>
                <p>✔ 登高赏菊：重阳相近<br>
                ✔ 吃芝麻：养阴防燥<br>
                ✔ 饮寒露茶：韵味悠长</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《池上》白居易<br>
                袅袅凉风动，凄凄寒露零。<br>
                兰衰花始白，荷破叶犹青。</p>
            </div>
        `
    },
    "霜降": {
        title: "霜降·草木黄落",
        date: "10月23-24日",
        content: `
            <div class="term-section">
                <p>又名严霜、霜刀、霜剑，是二十四节气中的第十八个节气，秋季的最后一个节气，斗指戌；太阳黄经为210° 。霜降在每年公历10月23日至24日之间的一天到来。霜降不是表示“降霜”，而是表示气温骤降、昼夜温差大。就中国平均而言，“霜降”是一年之中昼夜温差最大的时节。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候豺乃祭兽</li>
                    <li>二候草木黄落</li>
                    <li>三候蛰虫咸俯</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍂 传统习俗</h3>
                <p>✔ 赏红叶：层林尽染<br>
                ✔ 吃柿子：御寒补筋骨<br>
                ✔ 习战射：古代军事训练</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《赋得九月尽》元稹<br>
                霜降三旬后，蓂馀一叶秋。<br>
                玄阴迎落日，凉魄尽残钩。</p>
            </div>
        `
    },
    // 冬季
    "立冬": {
        title: "立冬·万物收藏",
        date: "11月7-8日",
        content: `
            <div class="term-section">
                <p>是二十四节气之第十九个节气，也是冬季的起始。斗柄指向西北，太阳黄经达225°，于每年公历11月7-8日之间交节 。立，建始也；冬，终也，万物收藏也。立冬，意味着生气开始闭蓄，万物进入休养、收藏状态。其气候也由秋季少雨干燥向阴雨寒冻的冬季气候过渡。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候水始冰</li>
                    <li>二候地始冻</li>
                    <li>三候雉入大水为蜃</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🥟 传统习俗</h3>
                <p>✔ 补冬：食用温热补品<br>
                ✔ 吃饺子："立冬补嘴空"<br>
                ✔ 酿黄酒：冬季酿造最佳</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《立冬》李白<br>
                冻笔新诗懒写，寒炉美酒时温。<br>
                醉看墨花月白，恍疑雪满前村。</p>
            </div>
        `
    },
    "小雪": {
        title: "小雪·虹藏不见",
        date: "11月22-23日",
        content: `
            <div class="term-section">
                <p>是二十四节气中的第20个节气，冬季第2个节气，时间在每年公历11月22或23日，即太阳到达黄经240°时。小雪是反映降水与气温的节气，它是寒潮和强冷空气活动频数较高的节气。小雪节气的到来，意味着天气会越来越冷、降水量渐增。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候虹藏不见</li>
                    <li>二候天气上升</li>
                    <li>三候闭塞成冬</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍲 传统习俗</h3>
                <p>✔ 腌腊肉："冬腊风腌，蓄以御冬"<br>
                ✔ 晒鱼干：沿海地区特色<br>
                ✔ 吃糍粑：古时丰收祭品</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《小雪》戴叔伦<br>
                花雪随风不厌看，更多还肯失林峦。<br>
                愁人正在书窗下，一片飞来一片寒。</p>
            </div>
        `
    },
    "大雪": {
        title: "大雪·仲冬伊始",
        date: "12月6-8日",
        content: `
            <div class="term-section">
                <p>又称“大雪节气”，是二十四节气中的第21个节气，冬季的第三个节气。斗指壬，太阳到达黄经255度，交节时间为每年公历12月6-8日。大雪节气是干支历子月的起始，标志着仲冬时节正式开始。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候鹖鴠不鸣</li>
                    <li>二候虎始交</li>
                    <li>三候荔挺出</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍲 传统习俗</h3>
                <p>✔ 腌肉："小雪腌菜，大雪腌肉"<br>
                ✔ 进补：食用羊肉、红薯粥<br>
                ✔ 观河封：观察河水结冰情况</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《江雪》柳宗元<br>
                千山鸟飞绝，万径人踪灭。<br>
                孤舟蓑笠翁，独钓寒江雪。</p>
            </div>
        `
    },
    "冬至": {
        title: "冬至·日短之至",
        date: "12月21-23日",
        content: `
            <div class="term-section">
                <p>又称日南至、冬节、亚岁等，是“二十四节气”之第22个节气，斗指子，太阳黄经达270°，于每年公历12月21-23日交节。
冬至是二十四节气中最早被测定和记录的节气之一。新石器时期先民测定出冬至，商周时文字记载。汉代视其为“冬节”，官府有“贺冬”仪式且放假。唐宋时，它是祭天祭祖日，皇帝祭天，百姓拜尊长。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候蚯蚓结</li>
                    <li>二候麋角解</li>
                    <li>三候水泉动</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🥟 传统习俗</h3>
                <p>✔ 祭天祭祖：重要祭祀日<br>
                ✔ 数九：绘制九九消寒图<br>
                ✔ 吃饺子："冬至不端饺子碗，冻掉耳朵没人管"</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《邯郸冬至夜思家》白居易<br>
                邯郸驿里逢冬至，抱膝灯前影伴身。<br>
                想得家中夜深坐，还应说着远行人。</p>
            </div>
        `
    },
    "小寒": {
        title: "小寒·冷气积久",
        date: "1月5-7日",
        content: `
            <div class="term-section">
                <p>是二十四节气中的第23个节气，冬季的第5个节气，干支历子月的结束与丑月的起始。斗指癸；太阳黄经为285°；于每年公历1月5-7日交节。冷气积久而寒，小寒是天气寒冷但还没有到极点的意思，它与大寒、小暑、大暑及处暑一样，都是表示气温冷暖变化的节气。小寒节气的特点就是寒冷，但是却还没有冷到极致。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候雁北乡</li>
                    <li>二候鹊始巢</li>
                    <li>三候雉始雊</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🍲 传统习俗</h3>
                <p>✔ 吃糯米饭：驱寒暖胃<br>
                ✔ 画图数九：绘制梅花消寒图<br>
                ✔ 探梅：踏雪寻梅赏幽香</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《小寒》元稹<br>
                小寒连大吕，欢鹊垒新巢。<br>
                拾食寻河曲，衔紫绕树梢。</p>
            </div>
        `
    },
    "大寒": {
        title: "大寒·寒气逆极",
        date: "1月20-21日",
        content: `
            <div class="term-section">
                <p>是二十四节气中的最后一个节气。每年公历1月20-21日太阳到达黄经300°时为“大寒” 。大寒同小寒一样，都是表示天气寒冷程度的节气，大寒是天气寒冷到极致的意思。大寒节气处在三九、四九时段，此时寒潮南下频繁，是一年中的最寒冷时节。</p>
            </div>
            
            <div class="term-section">
                <h3>❄️ 物候特征</h3>
                <ul>
                    <li>一候鸡始乳</li>
                    <li>二候征鸟厉疾</li>
                    <li>三候水泽腹坚</li>
                </ul>
            </div>
            
            <div class="term-section">
                <h3>🎇 传统习俗</h3>
                <p>✔ 尾牙祭：商家年终祭祀<br>
                ✔ 喝鸡汤："一九一只鸡"<br>
                ✔ 蒸腊米：制作传统年货</p>
            </div>
            
            <div class="term-section">
                <h3>📜 相关诗词</h3>
                <p class="poem">《大寒》陆游<br>
                大寒雪未消，闭户不能出。<br>
                可怜切云冠，局此容膝室。</p>
            </div>
        `
    }
};

        // 初始化特效
        window.addEventListener('load', () => {
            createStars();
            
            // 添加随机微动效果
            document.querySelectorAll('.solar-term').forEach(term => {
                term.style.transform += ` rotate(${Math.random()*4-2}deg)`;
            });
        });
        // 显示详情
        function showTermDetail(termName) {
            const modal = document.getElementById('detailModal');
            const detail = termDetails[termName] || {
                title: termName,
                content: "<p>📚 内容整理中，敬请期待...</p>"
            };

            modal.querySelector('#termTitle').innerHTML = `
                <span class="term-icon">🌸</span>
                ${detail.title}
                <span class="term-date">（${detail.date || '日期信息加载中'}）</span>
            `;
            
            modal.querySelector('#termContent').innerHTML = detail.content;
            modal.style.display = 'block';
            
            // 添加背景遮罩
            document.body.classList.add('modal-open');
        }
        // 关闭弹窗
        document.querySelector('.modal-close').addEventListener('click', () => {
            document.getElementById('detailModal').style.display = 'none';
        });
    </script>
</body>
</html>